<template>
	<view>
		<uni-nav-bar dark title="动态" fixed :statusBar="true">
		</uni-nav-bar>
		<view class="boxHeader flex">
			<view @click="onAdd">
				发布图文动态
			</view>
			<!-- <view v-if="platform != 'ios'" @click="goLive()">
				发布活动直播
			</view> -->
		</view>
		<view class="list" v-for="(item, index) in list">
			<view class="time">{{item.createTime}}</view>
			<view class="title">
				{{item.title}}
			</view>
			<view v-if="item.img" class="imglist">
				<view v-for="(child, index) in item.img.split(',')">
					<image @click="_previewImage(imageUrl + child)" :src="imageUrl + child" mode="aspectFill"></image>
				</view>
			</view>
		</view>
		<uni-load-more :status="loadingType"></uni-load-more>

	</view>
</template>

<script>
	import {
		getDynamicList
	} from '@/api/dynamic/index.js'
	import {
		imageUrl
	} from '@/config.js'
	export default {
		data() {
			return {
				list: [],
				page: {
					pageNum: 1,
					pageSize: 12
				},
				imageUrl: imageUrl,
				total: 0,
				loadingType: 'more',
				platform: getApp().globalData.platform
			}
		},
		methods: {
			getList() {
				let contestId = uni.getStorageSync('contestId')
				getDynamicList({
					...this.page,
					contestId
				}).then(res => {

					this.total = res.total
					this.list.push(...res.rows)
					if (this.list.length == this.total) {
						this.loadingType = 'no-more'
						return;
					}
				})
			},
			formatDateTime(date) {
			  function padZero(num) {
			    return num < 10 ? '0' + num : num;
			  }
			 
			  var year = date.getFullYear();
			  var month = padZero(date.getMonth() + 1);
			  var day = padZero(date.getDate());
			  var hours = padZero(date.getHours());
			  var minutes = padZero(date.getMinutes());
			  var seconds = padZero(date.getSeconds());
			 
			  return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
			},
			goLive(){
				console.log("安卓跳转页面");
				let currentDateTime = new Date(new Date().getTime() + 86400000);
				uni.navigateTo({
					url: `/pages/dynamic/liver?time=${this.formatDateTime(currentDateTime)}`
				})
			},
			onAdd() {
				uni.navigateTo({
					url: '/pages/dynamic/create'
				})
			},
			_previewImage(image) {
				var imgArr = [];
				imgArr.push(image);
				//预览图片
				uni.previewImage({
					urls: imgArr,
					current: imgArr[0]
				});
			},
		},
		async onReachBottom() {
			console.log("onReachBottom");
			if (this.list.length == this.total) {
				this.loadingType = 'no-more'
				return;
			}
			this.loadingType = 'loading'
			this.page.pageNum += 1
			this.getList()
		},
		onShow() {
			this.page.pageNum = 1
			this.list = []
			this.getList()
		}
	}
</script>

<style scoped lang="scss">
	.boxHeader {
		padding: 30rpx 20rpx;
		justify-content: space-between;

		view {
			width: 100%;
			background-color: #FEF4F3;
			text-align: center;
			padding: 20rpx;
		}
	}

	.list {
		padding: 30rpx 20rpx;

		.time {
			color: #A2A2A2;
			margin-bottom: 20rpx;
		}

		.title {
			margin-bottom: 20rpx;
		}
	}

	.imglist {
		display: flex;
		flex-wrap: wrap;

		view {
			width: calc((100% / 3) - 20rpx);
			height: 200rpx;
			margin-bottom: 20rpx;

			&:nth-child(3n - 1) {
				margin: 0 20rpx;
			}

			image {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>